<template>
	<div class="module-item-form" :style="!module.base.m ? 'margin-top:0' : ''">
		<div class="item-form-con">
			<moduleBg :base="module.base" />
			<moduleTwtit :title="module.title" v-if="module.title.s" />
			<!--表单-->
			<div class="item-form">
				<div class="item" v-for="(item, index) in module.list" @click="$util.openAttr(module.list,index)" :key="index">
					<div class="label" :class="'f'+item.type" v-if="module.showlabel"><i v-if="item.required">*</i>{{ item.label }}</div>
					<div class="input" v-if="item.type=='text'">
						<el-input :disabled="item.disabled" show-word-limit :maxlength="item.maxlength" :placeholder="item.placeholder" v-model="item.prop"></el-input>
					</div>
					<div class="input" v-if="item.type=='select'">
						<el-select :disabled="item.disabled" :placeholder="item.placeholder" v-model="item.prop">
							<el-option :label="a.label" :value="a.value" v-for="(a,i) in item.items" :key="i"></el-option>
						</el-select>
					</div>
					<div class="input" v-if="item.type=='radio'">
						<el-radio-group :disabled="item.disabled" :placeholder="item.placeholder" v-model="item.prop">
							<el-radio :label="a.value" v-for="(a,i) in item.items" :key="i">{{ a.label }}</el-radio>
						</el-radio-group>
					</div>
					<div class="input" v-if="item.type=='checkbox'">
						<el-checkbox-group :disabled="item.disabled" :placeholder="item.placeholder" v-model="item.prop">
							<el-checkbox :label="a.label" v-for="(a,i) in item.items" :key="i"></el-checkbox>
						</el-checkbox-group>
					</div>
					<div class="input" v-if="item.type=='textarea'">
						<el-input type="textarea" resize="none" show-word-limit :maxlength="item.maxlength" :disabled="item.disabled" :placeholder="item.placeholder" v-model="item.prop"></el-input>
					</div>
				</div>
				<div class="item">
					<div class="label"></div>
					<div class="input">	
					 <span  v-for="(a,i) in module.btn" :key="i" style="margin-right:10px;">
						 <el-button type="primary" v-if="!a.hide" :style="`background:${a.bgcolor};border-color:${a.bdcolor};color:${a.color}`">{{ a.text }}</el-button>
					 </span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import moduleBg from '@/views/module/bg.vue';
import moduleText from '@/views/module/text.vue';
export default {
	props: ['module'],
	components: { moduleBg, moduleText },
	data() {
		return {};
	},
	mounted() {
		if(this.module.list.length==0){
			this.module.list = JSON.parse(JSON.stringify(this.module.columns))
			this.setFormValue()
		}else{
			this.setFormValue()
		}
	},
	methods: {
		setFormValue(){
			this.module.list.forEach(res=>{
				 res.prop = res.value
			})
		}		 
	}
};
</script>

<style></style>
